import { useState, useEffect } from 'react';

export default function Page1(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    if (count) {
      console.log('执行了effect ', count);
    }

    //组件更新时，effects的清理也会执行一次。先执行清理，在执行effects。清理时用的是上一次的state，执行effects时用的是新的state。
  }, [count]);

  return (
    <div>
      <h3>this is a counter</h3>
      <h2>{count}</h2>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        click
      </button>
    </div>
  );
}
